<template>
  <div ref="xwin" style="height:100%;width:100%;">
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import request from '@/utils/request';

import henanJson from '@/views/zutai/components/echarts-map-json/province/henan.json'; //湖南
import hunanJson from '@/views/zutai/components/echarts-map-json/province/hunan.json'; //河南
import anhuiJson from '@/views/zutai/components/echarts-map-json/province/anhui.json'; //安徽
import aomenJson from '@/views/zutai/components/echarts-map-json/province/aomen.json'; //澳门
import beijingJson from '@/views/zutai/components/echarts-map-json/province/beijing.json'; //北京
import chongqingJson from '@/views/zutai/components/echarts-map-json/province/chongqing.json'; //重庆
import fujianJson from '@/views/zutai/components/echarts-map-json/province/fujian.json'; //福建
import gansuJson from '@/views/zutai/components/echarts-map-json/province/gansu.json'; //甘肃
import guangdongJson from '@/views/zutai/components/echarts-map-json/province/guangdong.json'; //广州
import guangxiJson from '@/views/zutai/components/echarts-map-json/province/guangxi.json'; //广西
import guizhouJson from '@/views/zutai/components/echarts-map-json/province/guizhou.json'; //贵州
import hainanJson from '@/views/zutai/components/echarts-map-json/province/hainan.json'; //海南
import hebeiJson from '@/views/zutai/components/echarts-map-json/province/hebei.json'; //河北
import heilongjiangJson from '@/views/zutai/components/echarts-map-json/province/heilongjiang.json'; //黑龙江
import hubeiJson from '@/views/zutai/components/echarts-map-json/province/hubei.json'; //湖北
import jiangsuJson from '@/views/zutai/components/echarts-map-json/province/jiangsu.json'; //江苏
import jiangxiJson from '@/views/zutai/components/echarts-map-json/province/jiangxi.json'; //江西
import jilinJson from '@/views/zutai/components/echarts-map-json/province/jilin.json'; //吉林
import liaoningJson from '@/views/zutai/components/echarts-map-json/province/liaoning.json'; //辽宁
import neimengguJson from '@/views/zutai/components/echarts-map-json/province/neimenggu.json'; //内蒙古
import ningxiaJson from '@/views/zutai/components/echarts-map-json/province/ningxia.json'; //宁夏
import qinghaiJson from '@/views/zutai/components/echarts-map-json/province/qinghai.json'; //青海
import shandongJson from '@/views/zutai/components/echarts-map-json/province/shandong.json'; //山东
import shanghaiJson from '@/views/zutai/components/echarts-map-json/province/shanghai.json'; //上海
import shanxiJson from '@/views/zutai/components/echarts-map-json/province/shanxi1.json'; //山西
import sichuanJson from '@/views/zutai/components/echarts-map-json/province/sichuan.json'; //四川
import taiwanJson from '@/views/zutai/components/echarts-map-json/province/taiwan.json'; //台湾
import tianjinJson from '@/views/zutai/components/echarts-map-json/province/tianjin.json'; //天津
import xianggangJson from '@/views/zutai/components/echarts-map-json/province/xianggang.json'; //香港
import xinjiangJson from '@/views/zutai/components/echarts-map-json/province/xinjiang.json'; //新疆
import xizangJson from '@/views/zutai/components/echarts-map-json/province/xizang.json'; //西藏
import yunnanJson from '@/views/zutai/components/echarts-map-json/province/yunnan.json'; //云南
import zhejiangJson from '@/views/zutai/components/echarts-map-json/province/zhejiang.json'; //浙江
import chartOption from '@/views/zutai/components/config-json/chart-option.js';
import BaseView from '@/views/zutai/components/topo/control/View';

export default {
  name: "ChartMapView",
  extends: BaseView,
  data() {
    return {
      echart: null,
      mapJsons: {},
      timer: null,
    }
  },
  computed: {
    echartRun() {
      this.$nextTick(function () {
        if (this.detail.dataBind.echartOption && (this.detail.dataBind.echartRun > new Date().getTime() - 1000)) {
          try {
            if (this.detail.dataBind.mapAddress == '自定义') {
              this.getMapJson(this.detail.dataBind.mapUrl);
            } else {
              this.initEcharts();
            }
          } catch (error) {
            console.log(error);
            this.$message({
              message: '图表初始化失败，请检查代码视图！',
              type: 'warning'
            });
          }
        }
      });
      return this.detail.dataBind.echartOption + this.detail.dataBind.echartRun;
    },
    mapChange() {
      this.$nextTick(function () {
        try {
          if (this.detail.dataBind.mapAddress == '自定义' && this.detail.dataBind.mapUrl) {
            this.getMapJson(this.detail.dataBind.mapUrl);
          } else {
            this.initEcharts();
          }
        } catch (error) {
          console.log(error);
          this.$message({
            message: '图表初始化失败，请检查代码视图！',
            type: 'warning'
          });
        }
      });
      return this.detail.dataBind.mapAddress;
    },
  },
  watch: {
    echartRun(newColor, oldColor) {
      // console.log('',newColor);
    },
    mapChange() {

    },
  },
  methods: {
    loadData(option, mapJson) {
      if (this.echart) {
        this.echart.dispose();
      }
      // let mapJson={};
      switch (this.detail.dataBind.mapAddress) {
        case '安徽':
          mapJson = anhuiJson;
          break;
        case '澳门':
          mapJson = aomenJson;
          break;
        case '北京':
          mapJson = beijingJson;
          break;
        case '重庆':
          mapJson = chongqingJson;
          break;
        case '福建':
          mapJson = fujianJson;
          break;
        case '甘肃':
          mapJson = gansuJson;
          break;
        case '广东':
          mapJson = guangdongJson;
          break;
        case '广西':
          mapJson = guangxiJson;
          break;
        case '贵州':
          mapJson = guizhouJson;
          break;
        case '海南':
          mapJson = hainanJson;
          break;
        case '河北':
          mapJson = hebeiJson;
          break;
        case '黑龙江':
          mapJson = heilongjiangJson;
          break;
        case '河南':
          mapJson = henanJson;
          break;
        case '湖北':
          mapJson = hubeiJson;
          break;
        case '湖南':
          mapJson = hunanJson;
          break;
        case '江苏':
          mapJson = jiangsuJson;
          break;
        case '江西':
          mapJson = jiangxiJson;
          break;
        case '吉林':
          mapJson = jilinJson;
          break;
        case '辽宁':
          mapJson = liaoningJson;
          break;
        case '内蒙古':
          mapJson = neimengguJson;
          break;
        case '宁夏':
          mapJson = ningxiaJson;
          break;
        case '青海':
          mapJson = qinghaiJson;
          break;
        case '山东':
          mapJson = shandongJson;
          break;
        case '上海':
          mapJson = shanghaiJson;
          break;
        case '山西':
          mapJson = shanxiJson;
          break;
        case '四川':
          mapJson = sichuanJson;
          break;
        case '台湾':
          mapJson = taiwanJson;
          break;
        case '天津':
          mapJson = tianjinJson;
          break;
        case '香港':
          mapJson = xianggangJson;
          break;
        case '新疆':
          mapJson = xinjiangJson;
          break;
        case '西藏':
          mapJson = xizangJson;
          break;
        case '云南':
          mapJson = yunnanJson;
          break;
        case '浙江':
          mapJson = zhejiangJson;
          break;
        case '自定义':
          mapJson = this.mapJsons;
          break;
        default:
          mapJson = henanJson;
          break;
      }
      this.$echarts.registerMap('mapJson', mapJson);
      let view = this.$refs.xwin;
      this.echart = this.$echarts.init(view);
      this.echart.setOption(option);
    },
    onResize() {
      if (this.echart) {
        this.echart.resize();
      }
    },
    //https://www.isqqw.com/asset/get/areas_v3/country/china.json
    getMapJson(mapUrl) {
      let query = {
        url: mapUrl,
      }
      let url = "/ignoreToken/getMapJson"
      request({
        url: url,
        method: "get",
        params: query,
      }).then((response) => {
        // console.log("获取地图数据",response.data.msg);
        this.mapJsons = JSON.parse(response.data.msg);
        this.initEcharts();
      })
    },
    async initEcharts() {
      if (!this.detail.dataBind.echartOption) {
        this.detail.dataBind.echartOption = chartOption.getOptionMap();
      }
      let funStr = chartOption.getFun(this.detail.dataBind.echartOption);
      let echartData = {};
      if (this.detail.dataBind.echartData) {
        try {
          echartData = JSON.parse(this.detail.dataBind.echartData);
        } catch (error) {
          this.$message({
            message: '请输入正确的json数据',
            type: 'warning'
          });
        }
      }

      console.log(funStr)
      let fun = new Function('request, echarts, echartData', funStr)
      let option = await fun(request, this.$echarts, echartData)
      this.loadData(option, this.mapJsons);
      this.onResize();
    },
    sendHttpRequest() {
      // console.log('发起请求',this.configObject.dataBind);
      let url = this.detail.dataBind.url;
      let method = this.detail.dataBind.method;
      let data = {};
      let bodyDataTable = this.detail.dataBind.bodyDataTable;
      for (let itemindex = 0; itemindex < bodyDataTable.length; itemindex++) {
        //$set()方法第一个参数是对象，第二个参数是key值，第三个参数是value值
        if (bodyDataTable[itemindex].key) {
          this.$set(data, bodyDataTable[itemindex].key, bodyDataTable[itemindex].value);
        }
      }
      let contentType = '';
      if (this.detail.dataBind.contentType == 2) {
        contentType = 'multipart/form-data'
      } else if (this.detail.dataBind.contentType == 3) {
        contentType = 'application/x-www-form-urlencoded;charset=utf-8'
      } else if (this.detail.dataBind.contentType == 4) {
        contentType = 'application/json;charset=utf-8'
        data = this.detail.dataBind.bodyDataArea
      } else if (this.detail.dataBind.contentType == 5) {
        contentType = 'text/xml'
        data = this.detail.dataBind.bodyDataArea
      } else {
        contentType = 'application/json;charset=utf-8'
        data = {};
      }
      let postUrl = "/zutai/bEchartType/sendHttpRequest"
      let postData = {
        url: url,
        method: method,
        contentType: contentType,
        params: this.detail.dataBind.paramData,
        headers: [
          ...this.detail.dataBind.headerData,
          {
            key: "Authorization",
            value: "Bearer " + getToken()
          }
        ],
        data: JSON.stringify(data),
      }
      request({
        url: postUrl,
        method: "post",
        data: postData,

      }).then((res) => {
        // console.log('sendHttpRequest-获取成功!', res);
        if (res.code == 200) {
          this.detail.dataBind.echartData = res.data;
          this.initEchart();
        }
      })
    },
  },
  mounted() {
    if (!this.editMode && this.detail.dataBind.url) {
      let interval = this.detail.dataBind.interval;
      let intervalType = this.detail.dataBind.intervalType;
      let multiple = 1000;//默认秒，1秒=1000毫秒
      if (intervalType == '分') {
        multiple = 1000 * 60
      } else if (intervalType == '时') {
        multiple = 1000 * 60 * 60
      }
      if (!interval) {
        interval = 60 * 1000;
      } else {
        interval = interval * multiple;
      }
      this.sendHttpRequest()
      this.timer = setInterval(() => {
        this.sendHttpRequest()
      }, interval);
    } else {
      if (this.detail.dataBind.mapAddress == '自定义') {
        this.getMapJson(this.detail.dataBind.mapUrl);
      } else {
        this.initEcharts();
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null;
  },
}
</script>
